<template>
	<view class="uni-padding-wrap uni-common-mt">
		<form @submit="formSubmit">
			<view class="uni-form-item uni-column">
				<view class="title">原始密码</view>
				<input type="password" class="uni-input" v-model="user.oldPassword" name="oldPassword" placeholder="请输入您的原始密码" />
			</view>
			<view class="uni-form-item uni-column">
				<view class="title">新密码</view>
				<input type="password" class="uni-input" v-model="user.newPassword" name="newPassword" placeholder="请输入您的新密码" />
			</view>
			<view class="uni-form-item uni-column">
				<view class="title">确认密码</view>
				<input type="password" class="uni-input" v-model="user.confirmPassword" name="confirmPassword" placeholder="请再次输入新密码" />
			</view>
			<view class="uni-btn-v">
				<button form-type="submit" type="primary">保存修改</button>
				<button type="default" @click="formReset">重置</button>
			</view>
		</form>
	</view>
</template>
<script>
	import {
		updateUserPwd
	} from '@/api/user.js'
	export default {
		data() {
			return {
				user: {
					oldPassword: undefined,
					newPassword: undefined,
					confirmPassword: undefined
				  }
			}
		},
		onLoad() {
			if(!this.$store.state.token){
				uni.navigateTo({
					url: '/pages/login/login'
				});
			}
			this.formReset();
		},
		methods: {
			formSubmit: function(e) {
				if (this.user.newPassword.length < 6 || this.user.newPassword.length > 30) {
					uni.showToast({
						title: '密码长度应该是6-30位',
						icon: "none"
					});
					return;
				}
				if (this.user.newPassword != this.user.confirmPassword) {
					uni.showToast({
						title: '两次输入的密码不致',
						icon: "none"
					});
					return;
				}
				console.log(this.user)
				updateUserPwd(this.user.oldPassword, this.user.newPassword).then(response => {
					uni.showToast({
						title: "修改成功!",
						icon: "none"
					});
					this.formReset();
				});
			},
			formReset: function(e) {
				this.user.oldPassword = '';
				this.user.newPassword = '';
				this.user.confirmPassword = '';
			}
		}
	}
</script>

<style>
	.uni-form-item .title {
		padding: 20rpx 0;
	}
</style>
